<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Multi Level Tree Map</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Multi Level Tree Map</p>
<hr class="separator">
<div class="content">
<img src="images/multileveltreemap.png" width='600' height='600'>
<br><br>
This example demonstrates a multi-level tree map.<br><br>
The code in this example is similar to that of the <a href="simpletreemap.htm">Simple Tree Map</a>, with the following changes:<br><br>
<ul><li> Data are added to the root node with <a href="TreeMapNode.setData.htm">TreeMapNode.setData</a> to produce child nodes. Data are then added to the child nodes to produce second level of child nodes.<br><br>
<li> As there are two levels of child nodes, there are two child node prototypes, one for each level, for configuring their styles.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/multileveltreemap.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The first level nodes of the tree map. There are 5 nodes.
String[] animals = {"Fish", "Amphibian", "Reptile", "Bird", "Mammal"};

// In this example, the colors are based on the first level nodes.
int[] colors = {0xff5555, 0xff9933, 0xffff44, 0x66ff66, 0x44ccff};

// Data for the second level nodes in "Fish"
String[] fish_names = {"Shark", "Ray", "Swordfish", "Sawfish", "Eel", "Lionfish", "Seahorse"};
double[] fish_data = {170, 144, 109, 115, 75, 45, 54};

// Data for the second level nodes in "Bird"
String[] bird_names = {"Swan", "Ostrich", "Eagle", "Penguin", "Kiwi", "Flamingo", "Owl", "Peacock"};
double[] bird_data = {89, 64, 94, 106, 68, 81, 40, 73};

// Data for the second level nodes in "Amphibian"
String[] amphibian_names = {"Toad", "Salamander", "Frog", "Caecilian"};
double[] amphibian_data = {67, 47, 58, 36};

// Data for the second level nodes in "Reptile"
String[] reptile_names = {"Turtle", "Crocodile", "Lizard", "Snake"};
double[] reptile_data = {58, 154, 97, 41};

// Data for the second level nodes in "Mammal"
String[] mammal_names = {"Big Cat", "Primate", "Panda", "Elephant", "Hippo", "Rhino", "Giraffe"};
double[] mammal_data = {266, 207, 160, 194, 168, 149, 202};

// Create a Tree Map object of size 600 x 600 pixels
TreeMapChart c = new TreeMapChart(600, 600);

// Add a title to the chart
c.addTitle("Animal Kingdom Census", "Arial Bold Italic", 18);

// Set the plotarea at (30, 30) and of size 540 x 540 pixels
c.setPlotArea(30, 30, 540, 540);

// Obtain the root of the tree map, which is the entire plot area
TreeMapNode root = c.getRootNode();

// Add first level nodes to the root. We do not need to provide data as they will be computed as the
// sum of the second level nodes.
root.setData(null, animals, colors);

// Add second level nodes to each of the first level node
root.getNode(0).setData(fish_data, fish_names);
root.getNode(1).setData(amphibian_data, amphibian_names);
root.getNode(2).setData(reptile_data, reptile_names);
root.getNode(3).setData(bird_data, bird_names);
root.getNode(4).setData(mammal_data, mammal_names);

// Get the prototype (template) for the first level nodes.
TreeMapNode nodeConfig = c.getLevelPrototype(1);

// Set the label format for the nodes to show the label with 8pt Arial Bold font in semi-transparent
// black color (0x77000000). Put the text at the top left corner of the cell.
nodeConfig.setLabelFormat("{label}", "Times New Roman Bold Italic", 18, 0x77000000, Chart.TopLeft);

// Set the border color to white (ffffff)
nodeConfig.setColors(-1, 0xffffff);

// Get the prototype (template) for the second level nodes.
TreeMapNode nodeConfig2 = c.getLevelPrototype(2);

// Set the label format for the nodes to show the label and value with 8pt Arial Bold font. Put the
// text at the center of the cell.
nodeConfig2.setLabelFormat("{label}&lt;*br*&gt;{value}", "Arial Bold", 8, Chart.TextColor, Chart.Center);

// Set the border color to white (ffffff)
nodeConfig2.setColors(-1, 0xffffff);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='&lt;*cdml*&gt;{label}: {value}'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Multi Level Tree Map&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Multi Level Tree Map
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
